<template>
  <div class="company">
    <h1>公司资料</h1>

    <el-form ref="formline" class="box"  :model="formline" :rules="rules">
      <el-form-item label="公司logo" label-width="120px" prop="imagesData">
        <template>
          <form class="banner_loade" enctype="multipart/form-data">
            <el-button class="upload" type="primary ">
              上传
              <input class="file" type="file" name="file" @change="uploadImg($event)" />
            </el-button>
            <div class="loade_img">
              <img class="img_auto" :src="formline.imagesData" alt />
            </div>
            <!-- <el-button class="upload" type="primary " v-if="imagesData!='string'">
              修改
              <input class="file" type="file" name="file" @change="uploadImg($event)">
            </el-button>-->
          </form>
        </template>
      </el-form-item>

      <el-form-item label="公司名称" label-width="120px" prop="companyName">
        <el-input v-model="formline.companyName"></el-input>
      </el-form-item>
      <el-form-item label="版本号" label-width="120px" prop="vernumber">
        <el-input v-model="formline.vernumber"></el-input>
      </el-form-item>
      <el-form-item label="公司地址" label-width="120px" prop="address">
        <el-input v-model="formline.address"></el-input>
      </el-form-item>
      <el-form-item label="咨询时间" label-width="120px" prop="workTime">
        <el-input v-model="formline.workTime"></el-input>
        <span>咨询时间格式输入 周一到周五 9:00~18:00</span>
      </el-form-item>
      <el-form-item label="婚礼服务协议" label-width="120px" prop="protocol">
        <el-input type="textarea" v-model="formline.protocol"></el-input>
      </el-form-item>
      <el-form-item label="公司简介" label-width="120px">
        <div id="editorElem" style="width:55vw"></div>
      </el-form-item>

      <el-form-item align="center">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="saveInfo(formline)">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import E from "wangeditor";
  import $ from "jquery";
  import Qiniu from "../../../static/js/qiniu";
  export default {
    name: "company",
    data() {
      return {
        editorContent: "",
        formline: {
          imagesData: "",
          companyName: "",
          vernumber: "",
          details: "",
          address: "",
          protocol: "",
          workTime: "",
        },
        createdAt: "",
        desc: "",
        introduction: "",
        rules: {
          imagesData: [{
            required: true,
            message: '请上传公司logo',
            trigger: 'blur'
          }],
          companyName: [{
            required: true,
            message: '请填写公司名称',
            trigger: 'blur'
          }],
          vernumber: [{
            required: true,
            message: '请输入版本号',
            trigger: 'blur'
          }],
          details: [{
            required: true,
            message: '请输入公司地址',
            trigger: 'blur'
          }],
          address: [{
            required: true,
            message: '请输入公司地址',
            trigger: 'blur'
          }],
          protocol: [{
            required: true,
            message: '请填写婚礼服务协议',
            trigger: 'blur'
          }],
          workTime: [{
            required: true,
            message: '请填写咨询时间',
            trigger: 'blur'
          }],
        }
      };
    },
    mounted() {
      setTimeout(() => {
        this.wangeditor();
      }, 1000)
      // let config = {
      //   headers: {
      //     "Content-Type": "application/json"
      //   }
      // };
      this.api.get("/api/lookcompany").then(res => {
        console.log(res, "aha");
        this.ruleForm = res.data;
        let info = res.data;
        this.formline.companyName = info.name;
        this.formline.address = info.address;
        this.formline.imagesData = info.logo;
        this.phone = info.phone;
        this.formline.workTime = info.advisorytime;
        this.editorContent = info.introduction;
        this.desc = info.details;
        this.formline.protocol = info.protocol;
        this.formline.vernumber = info.vernumber;
      });
      // 请求完接口执行富文本计划

    },
    methods: {
      // 富文本
      wangeditor() {
        var editor = new E("#editorElem");
        editor.customConfig.onchange = html => {
          this.editorContent = html;
        };
        editor.customConfig.qiniu = true;
        editor.create();
        console.log(this.editorContent, "大哥呀  别打脸")
        editor.txt.html(this.editorContent);
        this.uploaderInit(editor);
      },
      saveInfo(val) {
        let param = {
          address: this.formline.address,
          advisorytime: this.formline.workTime,
          // details: this.desc,
          // detail: this.editorContent,
          introduction: this.editorContent,
          logo: this.formline.imagesData,
          name: this.formline.companyName,
          protocol: this.formline.protocol,
          vernumber: this.formline.vernumber
        };
        console.log(param.introduction);
        this.api.post("/api/company", param).then(res => {
          let info = res.data;
          console.log(info);
          if (info) {
            this.formline.companyName = info.name;
            this.formline.address = info.address;
            this.formline.imagesData = info.logo;
            this.formline.phone = info.phone;
            this.formline.workTime = info.advisorytime;
            this.editorContent = info.introduction;
            this.desc = info.details;
            this.formline.protocol = info.protocol;
            this.formline.vernumber = info.vernumber;
            this.$message({
              type: 'success',
              message: '保存成功！'
            })
          } else {
            this.$message({
              type: 'success',
              message: '保存失败！'
            })
          }
        });
      },
      uploadImg(e) {
        const that = this;
        let file = e.target.files[0];
        let param = new FormData();
        param.append("files", file, file.name);
        let config = {
          headers: {
            "Content-Type": "application/json"
          }
        };
        that.api.post("/api/imgs", param, config).then(res => {
          console.log(res, "www");
          that.formline.imagesData = res.data[0];
        });
      },
      // 富文本
      uploaderInit(editor) {
        var that = this;
        var btnId = editor.imgMenuId;
        let qiniu=that.$qiniu;
        var containerId = editor.toolbarElemId;
        var textElemId = editor.textElemId;
        that.api.post("/api/uptoken", {}).then(res => {
          var uploader = new Qiniu().uploader({
            runtimes: "html5,flash,html4", //上传模式,依次退化
            browse_button: btnId, //上传选择的点选按钮，**必需**
            uptoken: res.data,
            unique_names: true,
            save_key: true,
            domain: "http://vrqn.liuliangin.com/", //bucket 域名，下载资源时用到，**必需**
            container: containerId, //上传区域DOM ID，默认是browser_button的父元素，
            max_file_size: "100mb", //最大文件体积限制
            filters: {
              mime_types: [
                //只允许上传图片文件 （注意，extensions中，逗号后面不要加空格）
                {
                  title: "图片文件",
                  extensions: "jpg,gif,png,bmp"
                }
              ]
            },
            max_retries: 3, //上传失败最大重试次数
            dragdrop: true, //开启可拖曳上传
            drop_element: textElemId, //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
            chunk_size: "4mb", //分块上传时，每片的体积
            auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传
            init: {
              FilesAdded: function(up, files) {
                plupload.each(files, function(file) {
                  // 文件添加进队列后,处理相关的事情
                  that.printLog("on FilesAdded");
                });
              },
              BeforeUpload: function(up, file) {
                // 每个文件上传前,处理相关的事情
                that.printLog("on BeforeUpload");
              },
              UploadProgress: function(up, file) {
                // 显示进度
                that.printLog("进度 " + file.percent);
              },
              FileUploaded: function(up, file, info) {
                // 每个文件上传成功后,处理相关的事情
                // 其中 info 是文件上传成功后，服务端返回的json，形式如
                // {
                //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                //    "key": "gogopher.jpg"
                //  }
                that.printLog(info);
                // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
                var domain = up.getOption("domain");
                var res = $.parseJSON(info.response);
                var sourceLink = domain + res.key; //获取上传成功后的文件的Url
                that.printLog(sourceLink);
                // 插入图片到editor
                editor.cmd.do(
                  "insertHtml",
                  '<img src="' + sourceLink + '" style="max-width:100%;"/>'
                );
              },
              Error: function(up, err, errTip) {
                //上传出错时,处理相关的事情
                that.printLog("on Error");
              },
              UploadComplete: function() {
                //队列文件处理完毕后,处理相关的事情
                that.printLog("on UploadComplete");
              }
            }
            //upload的括号
          });
        });
      },
      printLog(title, info) {
        console.log(title, "1");
        console.log(info, "2");
        window.console && console.log(title, info);
      }
      // 富文本结束
    }
  };
</script>

<style scoped>
  .box {
    width: 50%;
  }

  .banner_loade {
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    /* justify-content: space-around; */
  }

  .upload {
    position: relative;
    width: 80px;
    height: 32px;
    line-height: 10px;
  }

  .file {
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    opacity: 0;
  }

  .loade_img {
    background: url("./../../../static/img/push.jpg") no-repeat;
    background-size: 80px 80px;
    width: 80px;
    height: 80px;
    margin: 50px 0 0 10px;
  }

  .img_auto {
   max-width: 100%;
   width: 100%;
   max-height: 100%;
   height: 100%;
   object-fit: cover;
  }
</style>
